<template>
	<div>
		<van-nav-bar title="维保历史" left-arrow @click-left="goBack"></van-nav-bar>
		<van-notice-bar :text="totle"></van-notice-bar>

		<div id="ls-concent">
			<div class="ls" v-for="(item,index) in list" :key="index">
				<div class="ls-item">
					<van-field label="工单号" v-model="item.workNo"></van-field>
					<van-field label="维保类型" v-model="item.type===0?'待支付':item.type===1?'维保中':'已完成' "></van-field>
					<van-field label="维保日期" v-model="item.createTime"></van-field>
					<van-field label="送休息时间" v-model="item.deliveryTime"></van-field>
					<van-field label="金额" v-model="item.payment.price"></van-field>
				</div>
			</div>
		</div>
		<van-pagination v-model="pageNumb" :total-items="totles" @change="change"></van-pagination>
	</div>
</template>

<script>
	import ajax from '../../util/request.js'
	export default {
		data() {
			return {
				totle: '',
				totles: 1,
				list: [],
				pageNumb: 1
			}
		},

		methods: {
			goBack() {
				this.$router.replace('/home')
			},
			getList() {
				ajax({
					url: "/dev-api/bs-vehicle-owner/maintenance-appointment/page",
					params: {
						pageNum: this.pageNumb,
						pageSize: 5
					},
				}).then(e => {
					this.totle = "您的历史记录一共有" + e.total + "条"
					console.log(e)
					this.list = e.rows
					this.totles = e.total
				})
			},
			change(e) {
				this.pageNumb = e
				this.getList()
			}
		},
		created() {
			this.getList()
		}
	}
</script>

<style>
	.ls {
		margin-top: 20px;
		border: 1px #eee solid;
		border-radius: 10;
	}
</style>
